<template>
	<view class="page_wrap">
		<custom-header :title="title" sticky />
		<view class="header-info">
			<view class="info">
				<view class="label">
					客户备注：
				</view>
				<view class="value">
					备注内容备注内容
				</view>
				<view class="btn" @click="handleGoOperationLog">操作日志</view>
			</view>
			<view class="info">
				<view class="label">
					平台备注：
				</view>
				<view class="value">
					备注内容备注内容备
				</view>
			</view>
			<view class="info2">
				<view class="left">
					<view class="label">
						打包数量：
					</view>
					<view class="value" @click="isShowSelectPackage = true">
						2件<text class="red">(查看包装)</text>
					</view>
				</view>
				<view class="right">
					<view class="label">
						打包人员：
					</view>
					<view class="value">
						王小明
					</view>
				</view>
			</view>
			<view class="info2">
				<view class="left">
					<view class="label">
						物流公司：
					</view>
					<view class="value" @click="makeCall">
						昱泰航空 <image class="phone-icon" src="/static/common/phone1.png" mode="aspectFit"/>
					</view>
				</view>
				<view class="right">
					<view class="label">
						物流费用：
					</view>
					<view class="value">
						￥188.88
					</view>
				</view>
			</view>
		</view>
		<!-- Tab切换 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab == 1 }" @click="switchTab(1)">
				<image v-if="activeTab == '1'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">待配货({{ tabCounts.peihuo1 }})</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab == 2 }" @click="switchTab(2)">
				<image v-if="activeTab == '2'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">已配货({{ tabCounts.peihuo2 }})</text>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="_wrap">
			<view
				class="no_data" 
				v-if="!listData.length && listLoading != 'loading'">
					<view class="text">暂无数据</view>
			</view>
			<!-- 表格区域 -->
			<view class="table-section" v-else-if="listData.length">
				<!-- 表头 -->
				<view class="table-header">
					<text class="header-cell flower-cell">花材</text>
					<text class="header-cell number-cell">配货数/总数</text>
					<text class="header-cell record-cell">质检记录</text>
					<text class="header-cell operation-cell">操作</text>
				</view>
			
				<!-- 数据行 -->
				<view class="table-body">
					<view class="table-row" v-for="(item, index) in listData" :key="index">
						<view class="table-cell flower-cell">
							<view class="supplier-info">
								<text class="supplier-name">{{ item.supplierName }}</text>
								<text class="replace">{{ item.replace }}</text>
							</view>
							<view class="flower-info">
								<text class="flower-name">{{ item.flowerName }}</text>
								<text class="grade">{{ item.grade }}</text>
							</view>
						</view>
						<text class="table-cell number-cell">
							{{ item.number }}/{{ item.maxNumber }}
						</text>
						<view class="table-cell record-cell">
							<block v-if="item.stockoutNumber || item.demotionNumber">
								<view>缺货{{item.stockoutNumber}}扎</view>
								<view>降级{{item.demotionNumber}}扎</view>
							</block>
							<block v-else>无</block>
						</view>
						<view class="table-cell operation-cell"></view>
					</view>
				</view>
			</view>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore 
					:status="listLoading" 
					iconSize="22"
					iconColor="#F5564D"  
					loadingIcon='semicircle'
					loadingText="" />
			</view>
		</view>
		
		<view class="footer_btn_wrap fixed">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn"
					@click="handleShipments">
						{{ pageStatus==1?'开始发货':'修改信息' }}
					</button>
			</view>
		</view>
		
		<!-- 处理发货 - 详情信息 -->
		<up-popup :show="isShowDetailPopup" mode="center" round="10" @close="isShowDetailPopup = false" :safeAreaInsetBottom="true">
			<view class="detail_popup">
				<view class="picker-title">详细信息</view>
				<view class="picker-content-wrap">
					<view class="form-item">
						<view class="label">货位号</view>
						<view class="value">#28-223</view>
					</view>
					<view class="form-item">
						<view class="label">付款方式</view>
					</view>
					<view class="payment_method">
						<view 
							class="list"
							:class="{active:item.id == fromData.paymentMethod}"
							v-for="(item,index) in paymentMethodList"
							:key="index"
							@click="handleSelectPaymentMethod(item)">
								{{ item.name }}
						</view>
					</view>
					<view class="form-item">
						<view class="label">物流公司</view>
						<view class="value">
							<input type="text" v-model="fromData.logistics" placeholder="请输入公司">
						</view>
					</view>
					<view class="form-item" v-if="fromData.paymentMethod == 1">
						<view class="label">物流费用<text class="red">*</text></view>
						<view class="value">
							<input type="number" v-model="fromData.price" placeholder="请输入费用">
						</view>
					</view>
				</view>
				<view class="picker-header">
					<view class="cancel btn" @click="isShowDetailPopup = false">取消</view>
					<view class="confirm btn" @click="handleConfirmShipments">确认</view>
				</view>
			</view>
		</up-popup>
		
		<!-- 查看包装 -->
		<up-popup :show="isShowSelectPackage" mode="bottom" round="10" @close="isShowSelectPackage = false" :safeAreaInsetBottom="true">
			<view class="package_popup">
				<view class="picker-title">查看包装</view>
				<scroll-view class="picker-content-wrap" scroll-y>
					<view class="list_wrap">
						<view class="list" v-for="(item,index) in boxList" :key="index">
							<view class="name">
								{{ item.name }}
							</view>
							<view class="count">
								<custom-number v-model="item.count" disabled></custom-number>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="picker-header">
					<view class="cancel btn" @click="isShowSelectPackage = false">取消</view>
					<view class="confirm btn" @click="isShowSelectPackage = false">确认</view>
				</view>
			</view>
		</up-popup>
		
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast" />
	</view>
</template>

<script setup>
	import { ref,reactive,computed,onMounted } from 'vue'
	import { objectToQueryString } from '../../utils/util.js'
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	// 弹出层确认
	const confirmToast = (data)=>{
		console.log(data)
		hideToast()
	}
	
	
	
	// 标题
	const title = ref('')
	
	// 当前激活的Tab
	const activeTab = ref(1)
	// Tab统计数据
	const tabCounts = reactive({
		peihuo1:888,
		peihuo2:999
	})
	// 切换Tab
	const switchTab = (tab) => {
		activeTab.value = tab
		loadGetListData()
	}
	
	// 列表数据
	const listData = ref([])
	const listLoading = ref('loadmore')
	const loadGetListData = () => {
		listData.value = []
		// 待配货
		if(activeTab.value == 1){
			listData.value = [
				{
					flowerName:'蜜桃雪山蜜桃雪山蜜桃雪山蜜桃雪山(香槟)',
					grade:'A级',
					supplierName:'富旺花卉',
					replace:'斗南', 
					stockoutNumber:0, // 缺货
					demotionNumber:0, // 降级
					number:53,
					maxNumber:99,
					status:0,  //已配货
				},
				{
					flowerName:'蜜桃雪山(香槟)',
					grade:'A级',
					supplierName:'富旺花卉',
					replace:'代配', 
					stockoutNumber:0, // 缺货
					demotionNumber:0, // 降级
					number:25,
					maxNumber:70,
					status:0,  //已配货
				},
				{
					flowerName:'蜜桃雪山(香槟)',
					grade:'A级',
					supplierName:'富旺花卉',
					replace:'代配', 
					stockoutNumber:0, // 缺货
					demotionNumber:0, // 降级
					number:66,
					maxNumber:88,
					status:0,  //已配货
				},
				{
					flowerName:'蜜桃雪山(香槟)',
					grade:'A级',
					supplierName:'富旺花卉',
					replace:'代配', 
					stockoutNumber:0, // 缺货
					demotionNumber:0, // 降级
					number:66,
					maxNumber:88,
					status:0,  //已配货
				}
			]
		}
		// 已配货
		else if(activeTab.value == 2){
			listData.value = [
				{
					flowerName:'蜜桃雪山蜜222(香槟)',
					grade:'A级',
					supplierName:'富旺花卉',
					replace:'斗南', 
					stockoutNumber:1, // 缺货
					demotionNumber:0, // 降级
					number:53,
					maxNumber:99,
					status:1,  //已配货
				},
				{
					flowerName:'22蜜桃雪山(香槟)',
					grade:'A级',
					supplierName:'富旺花卉',
					replace:'代配', 
					stockoutNumber:0, // 缺货
					demotionNumber:1, // 降级
					number:25,
					maxNumber:70,
					status:1,  //已配货
				},
				{
					flowerName:'33蜜桃雪山(香槟)',
					grade:'A级',
					supplierName:'富旺花卉',
					replace:'代配', 
					stockoutNumber:5, // 缺货
					demotionNumber:5, // 降级
					number:66,
					maxNumber:88,
					status:1,  //已配货
				}
			]
		}
			
	}
	
	// 操作日志
	const handleGoOperationLog = () => {
		uni.navigateTo({
			url: '/pages/operationLog/operationLog'
		})
	}
	
	// 查看包装
	const isShowSelectPackage = ref(false)
	const boxList = ref([
		{
			name:"天地盖（40*20）",
			count:1
		},
		{
			name:"80箱（110*80）",
			count:1
		},
		{
			name:"60箱（110*80）",
			count:1
		},
		{
			name:"40箱（110*80）",
			count:1
		},
		{
			name:"20箱（110*80）",
			count:1
		}
	])
	
	// 拨打电话
	const makeCall = () => {
	  uni.makePhoneCall({
	    phoneNumber: '10086'
	  })
	}
	
	// 处理发货
	const pageStatus = ref(1) // 1待发货 2 已发货
	const isShowDetailPopup = ref(false)
	const fromData = ref({
		logistics:'',
		price:null,
		paymentMethod:1
	})
	// 付款方式
	const paymentMethodList = ref([
		{ id:1,name:'正常付款' },
		{ id:2,name:'到付' },
		{ id:3,name:'月结' },
		{ id:4,name:'客户自提' }
	])
	// 选择付款方式
	const handleSelectPaymentMethod = (data)=>{
		fromData.value.paymentMethod = data.id
	}
	// 打开详情
	const handleShipments = ()=>{
		isShowDetailPopup.value = true
	}
	// 确认详情信息
	const handleConfirmShipments = ()=>{
		
		// 正常付款需要判断价格必填
		if(fromData.value.paymentMethod == 1){
			if(!fromData.value.price && !fromData.value.price != 0){
				showToast('请输入费用')
				return
			}
		}
		pageStatus.value = 2
		activeTab.value = 2
		isShowDetailPopup.value = false
	}
	
	onMounted(() => {
	  // 获取页面参数
	  const pages = getCurrentPages()
	  const currentPage = pages[pages.length - 1]
	  const options = currentPage.options
	  console.log(options)
	  title.value = options.name
	  
	  loadGetListData()
	})
</script>

<style lang="scss">
	.page_wrap{
		min-height: 100vh;
		background-color: #fff;
	}
	._wrap{
		padding-bottom: 140rpx;
	}
	.header-info{
		margin: 24rpx;
		padding: 0 24rpx 24rpx;
		border-radius: 20rpx;
		border:1px solid #D7D7D7;
		font-size: 28rpx;
		color: #333;
		.info,.info2{
			display: flex;
			padding-top: 24rpx;
			.label{
				width: 140rpx;
				color: #999;
			}
			.value{
				flex: 1;
				padding-right: 10rpx;
			}
			.btn{
				width: 136rpx;
				text-align: center;
				height: 49rpx;
				line-height: 49rpx;
				border-radius: 10rpx;
				color: #666666;
				border: 1px solid #666666;
				&.btn2{
					color: #4298FF;
					border: 1px solid #4298FF;
				}
			}
		}
		.info2{
			.left,.right{
				flex: 1;
				display: flex;
				.red{
					color: #F5564D;
				}
				.phone-icon {
				  width: 18rpx;
				  height: 18rpx;
				}
			}
			.left{
				flex: 1.2;
			}
		}
	}
	// Tab栏
	.tab-bar {
		background: #ffffff;
		display: flex;
		.tab-item {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
	
			.tab-icon {
				width: 27.5rpx;
				height: 25rpx;
				transform: translateX(10rpx) translateY(-16rpx);
			}
	
			.tab-text {
				font-size: 28rpx;
				color: #999;
			}
	
			.tab-indicator {
				position: absolute;
				bottom: 0;
				width: 60rpx;
				height: 4rpx;
				background: #f5564d;
				border-radius: 2rpx;
			}
	
			&.active .tab-text {
				color: #333;
				font-weight: 600;
			}
		}
	}
	.no_data{
		padding-top: 100rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}
	// 表格区域
	.table-section {
		.table-header {
			padding: 0 24rpx;
			display: flex;
			background: #F5F7F9;
			height: 67rpx;
			align-items: center;
			border-radius: 12rpx;
			.header-cell {
				font-size: 24rpx;
				color: #333333;
				font-weight: 600;
	
				&.flower-cell {
					flex: 2.5;
					text-align: center;
				}
	
				&.number-cell {
					flex: 1.5;
					text-align: center;
				}
	
				&.record-cell {
					flex: 1.5;
					text-align: center;
				}
	
				&.operation-cell {
					flex: 0.8;
				}
			}
		}
	
		.table-body {
			padding: 0 24rpx;
			margin-top: 12rpx;
			.table-row {
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #F2F2F2;
				position: relative;
	
				&:last-child {
					border-bottom: none;
				}
				// &:active {
				// 	background-color: #f1f1f1;
				// }
	
				.table-cell {
					font-size: 24rpx;
					color: #666666;
					&.flower-cell {
						flex: 2.5;
						.supplier-info{
							width: 250rpx;
							display: flex;
							.supplier-name {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								min-width: 0;
							}
							.replace{
								display: inline-block;
								width: 64rpx;
								text-align: center;
								height: 32rpx;
								line-height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #5786FF;
								color: #5786FF;
								font-size: 22rpx;
								margin-left: 10rpx;
							}
						}
						.flower-info{
							white-space: nowrap;
							overflow: hidden;
							padding-top: 12rpx;
							display: flex;
							width: 250rpx;
							.flower-name {
								color: #333;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								min-width: 0;
							}
							.grade {
								color: #F5564D;
								font-size: 24rpx;
								flex-shrink: 0;
								min-width: 50rpx;
								margin-left: 10rpx;
							}
						}
					}
	
					&.number-cell {
						flex: 1.5;
						text-align: center;
					}
	
					&.record-cell {
						flex: 1.5;
						text-align: center;
					}
	
					&.operation-cell {
						flex: 0.8;
	
						.pending {
							display: flex;
						}
	
						.approved {
							color: #30C8AE;
							display: flex;
						}
					}
				}
			}
		}
	}
	
	
	.package_popup{
		// 选择包装
		.picker-title{
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			text-align: center;
			padding: 48rpx 0;
		}
		.picker-content-wrap{
			max-height: 500px;
			.list_wrap{
				.list{
					height: 96rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 48rpx;
					font-size: 32rpx;
					color: #666;
				}
			}
		}
		.picker-header {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 60rpx;
			.btn {
				width: 240rpx;
				line-height: 72rpx;
				font-size: 32rpx;
				width: 180rpx;
				text-align: center;
				border-radius: 120rpx;
			}
		
			.cancel {
				background: #FFF0F0;
				color: #F5564D;
			}
		
			.confirm {
				color: #FFF;
				background: #F5564D;
			}
		}
	}
	
	.detail_popup{
		// 选择包装
		.picker-title{
			font-size: 36rpx;
			color: #333;
			text-align: center;
			padding: 24rpx 0 32rpx;
		}
		.picker-content-wrap{
			width: 640rpx;
			margin: 0 24rpx 24rpx;
			padding-bottom: 48rpx;
			border-bottom: 1px solid #F0F0F0;
			font-size: 28rpx;
			color: #333;
			.form-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 32rpx;
				.label{
					color: #666;
					.red{
						color: #F5564D;
					}
				}
				.value{
					color: #333;
					input{
						width: 200rpx;
						height: 56rpx;
						border: 1px solid #D7D7D7;
						border-radius: 10rpx;
						font-size: 28rpx;
						color: #333;
						text-align: center;
					}
				}
			}
			.payment_method{
				display: flex;
				padding-top: 32rpx;
				gap: 24rpx;
				.list{
					flex: 1;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					box-sizing: border-box;
					background-color: #F5F6FA;
					border: 1px solid #F5F6FA;
					color: #3D3D3D;
					font-size: 28rpx;
					border-radius: 10rpx;
					&.active{
						border: 1px solid #F5564D;
						background-color: #FCEEF0;
						color: #F5564D;
					}
				}
			}
		}
		.picker-header {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 60rpx;
			.btn {
				width: 240rpx;
				line-height: 72rpx;
				font-size: 32rpx;
				width: 180rpx;
				text-align: center;
				border-radius: 120rpx;
			}
		
			.cancel {
				background: #FFF0F0;
				color: #F5564D;
			}
		
			.confirm {
				color: #FFF;
				background: #F5564D;
			}
		}
	}
	
</style>
